<template>
  <div class="tenant-wrapper">
    <el-table v-loading="listLoading" :data="listData" border fit highlight-current-row>
      <el-table-column prop="name" label="用工单位名称">
        <template slot-scope="scope">
          <el-button type="text" @click="seeDetail(scope.row)">{{ scope.row.name }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="经办人" width="120">
        <template slot-scope="scope">
          {{ scope.row.enterpriseOperator ? scope.row.enterpriseOperator.name : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="经办人电话" width="120">
        <template slot-scope="scope">
          {{ scope.row.enterpriseOperator ? scope.row.enterpriseOperator.mobile : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="企业注册地址"> </el-table-column>
      <!-- <el-table-column prop="createdOn" label="创建日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" style="marginright: 4px" />
          <span>{{ scope.row.createdOn | dateFilter }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="contractEndDate" label="合同签署截止日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.contractEndDate" style="marginright: 4px" />
          <span>{{ scope.row.contractEndDate | dateFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="latestFlowStatus" label="状态" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.latestFlowStatus | statusFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="cancelContract(scope.row)">撤回合同</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleClickDelete(scope.row)">
            <el-button slot="reference" type="text" size="small" style="color: red; marginLeft: 8px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="tenant-page">
      <el-pagination
        small
        layout="prev, pager, next, total, sizes, jumper"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>

    <el-dialog title="用工单位详情" :visible.sync="infoVisible" :close-on-click-modal="false" width="700px">
      <tenant-detail :currentRow="currentRow" :sendRecord="sendRecord"></tenant-detail>
      <div class="tenant-page" v-if="sendTotal>0">
        <el-pagination
          small
          layout="prev, pager, next, total"
          :page-size="sendPageSize"
          :current-page="sendCurrentPage"
          :total="sendTotal"
          @current-change="handleSendCurrentChange"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import { getTenantList, deleteTenant, channelCancelFlow, sendWorkerRecord } from '@common/api/tenant';
import TenantDetail from './components/tenantDetail';
import { TENANT_STATUS } from '@common/consts/status';

export default {
  name: 'init',
  components: {
    TenantDetail,
  },
  data() {
    return {
      listLoading: false,
      listData: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      selectedData: [],
      infoVisible: false,
      currentRow: {},
      sendRecord: [],
      sendTotal: 0,
      sendCurrentPage: 1,
      sendPageSize: 5,
    };
  },
  filters: {
    dateFilter(time) {
      if (String(time).length === 13) {
        return moment(time).format('YYYY-MM-DD HH:mm');
      }
      if (String(time).length === 10) {
        return moment(time * 1000).format('YYYY-MM-DD HH:mm');
      }
      return '';
    },
    statusFilter(status) {
      return status ? TENANT_STATUS[status] : '';
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.listLoading = true;
      const params = {
        status: 'INIT',
        limit: this.pageSize,
        offset: (this.currentPage - 1) * this.pageSize,
      };
      const response = await getTenantList(params);
      // console.log('getTenantList====', response);
      if (response?.data?.tenants?.length) {
        this.listData = response?.data?.tenants;
      } else {
        this.listData = [];
      }
      this.total = response?.data?.totalCount || 0;
      this.listLoading = false;
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 撤回合同
    async cancelContract(data) {
      const response = await channelCancelFlow({ flowId: data?.flowIds, tenantId: data?.id });
      if (response?.code === 20000 && response?.data?.RequestId) {
        this.getList();
        this.$message({ message: '撤回合同成功', type: 'success' });
        // 跳转到待签署页面
        return this.$router.push({
          path: '/tenant/undisturbed',
        });
      }
      return this.$message.error('撤回合同失败');
    },

    // 删除
    handleClickDelete(data) {
      deleteTenant({ id: data.id }).then(res => {
        if (res?.code === 20000) {
          this.$message({
            message: res?.message,
            type: 'success',
          });
          this.getList();
        } else {
          this.$message({
            message: res?.message,
            type: 'warning',
          });
        }
      });
    },
    // 详情
    async seeDetail(data) {
      if (data?.id) {
        this.currentRow = data;
        // 获取用工单位人员派遣详情
        this.getSendList(data);
        this.infoVisible = true;
      }
    },
    // 获取用工单位派遣详情
    async getSendList(data) {
      const params = {
        tenantId: data.id,
        limit: this.sendPageSize,
        offset: (this.sendCurrentPage - 1) * this.sendPageSize,
      };
      const sendRes = await sendWorkerRecord(params);
      if (sendRes?.code === 20000 && sendRes?.data?.list?.length) {
        this.sendRecord = sendRes?.data?.list;
      }
      this.sendTotal = sendRes?.data?.totalCount || 0;
    },

    // 派遣详情分页
    handleSendCurrentChange(val) {
      this.sendCurrentPage = val;
      this.getSendList(this.currentRow);
    },
  },
};
</script>

<style lang="scss" scoped>
.tenant-wrapper {
  padding: 20px;
  .tenant-btns {
    margin-bottom: 20px;
  }
  .tenant-page {
    position: relative;
    text-align: right;
    margin-top: 20px;
    .el-pagination {
      display: inline-block;
    }
  }
}
</style>
